<template>
	<kb-layout title="我的门票">
		<view class="line-border u-margin-bottom-30"> </view>
		<view v-for="(item,index) in cardList" :key="index">
			<view class="ticket u-flex u-flex-between u-margin-35">
				<view class="tleft text-center">
					<view class="u-flex u-flex-column  u-flex-center align-center">
						<view class="u-margin-bottom-20">
							<text class="color-red font-weight">门票</text>
						</view>
						<view class="">
							<text class="font-size12">{{item.total_count}}张</text>
						</view>					
					</view>				
				</view>
				 
				<view class="tbody u-padding-30">
					<view class="ticket-type">
						<view class="tags " :class="{'tag1': item.tag_id==1,'tag2': item.tag_id==2,'tag3': item.tag_id==3}">
							 {{item.tag}}
						</view>
					</view>
					<!-- 门票标题 -->
					<view v-if="item.orderInfo" class=" font-size14">
						<navigator :url="'/pages/mall/detail?id='+item.orderInfo.id">
						<text class="font-weight">{{item.ticket_title}}</text>
						</navigator>
					</view>
					<view v-else class="font-size14">						 
						<text class="font-weight">{{item.ticket_title}}</text>						 
					</view>
					<!-- 门票标题 -->
					
					<view class="u-margin-top-30 u-margin-bottom-20 font-size12">
						<text class="">出行日期：</text>
						<text class="font-weight color-red ">{{item.select_day2}}</text>
						<text class="color-gray font-size12"> [仅限当日使用]</text>
					</view>
					<view class="">
						<text class="font-size12 color-gray">备注：{{item.ticket_subtitle}}</text>
					</view>
					<view class="ticket_no font-size12">
						<text class="color-gray">票号NO: </text>
						<text class="color-gray">{{item.ticket_sn}}</text>
					</view>
				</view>
			</view>
		</view>		
		 
		
		<up-empty v-if="isempty" mode="shop" text="暂无数据" icon="/static/empty/nodata.png"> </up-empty>
		  
		<view v-if="(!isempty && nomore)" class="findmore"> 已经到底线了</view>
		 
	</kb-layout>
</template>

<script>
	import { userTickets } from '../../common/api';
	import suggestGoodItem from "../mall/componets/good-grid-item.vue"; 
	export default {
		components:{
			suggestGoodItem 
			 
		},
		data() {
			return {
				keyword:"",
				cardList:[],
				navIndex:0,
				page:1,
				pagesize:10,  
				total:0,
				shotips: undefined,
				nomore:true,
			}
		},
		computed:{
			isempty(){
				return  this.total==0;
			} 
		},
		onLoad() {
			this.fetchData();
		},
		methods: {
			 
			clearResult(){
				this.cardList = [];
				this.page=1;
				this.total = 0;
			},
			fetchData( ){
			 
				uni.showLoading({title: 'Loading...'});	
				const params = {  page: this.page ,type: 2 ,keyword:this.keyword , limit: this.pagesize};
				userTickets(params)  .then( (ret) => {
						  
						if(ret.data.length>0){								 
							this.page = this.page +1;							
							this.total = ret.total;					
							this.cardList = this.cardList.concat(ret.data);
						}  
						uni.hideLoading();
						
					}
				)  
			}
		},
		onReachBottom() {
			if(this.total  && this.total < this.page * this.pagesize) 
				this.nomore = true;
			else
			   this.total >1 &&  this.fetchData();
			
			this.shotips = false;	
			return true;
			 
		},
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #fff;
	}
.ticket {
 
  border-radius: 10px;
  background-color: #f0f0f0; /* 背景色 */
  align-items: center;
  
  .tleft{
	  width:20%;
	  
  }
  .tbody{
	  position: relative;
	  width: 77%;
	  border-left: #fff dashed 4px;
  } 
  .ticket_no{
	  text-align: left;
	  font-size: 20rpx;
  }
  .ticket-type {
  	display: flex;
	position: absolute;
	right: 0px;
	top: 0px;
  
  	.tags {
  		
  		border-bottom-left-radius: 10px;   
  		padding-right: 15px;
  		padding-left: 15px;
		font-size: 20rpx;
		padding-bottom: 2px;
  	}
	.tag1{
		background-color: #1BA035;
		color: #fff;
	}
	.tag2{
		background-color: #F7CB49 ;
		color: #fff;	
	}
	.tag3{
		background-color: #ccc ;
		color: #fff;	
	}
  }
}
 
</style>